<template>
  <div>
    <nav-bar class="navbar">
    <img src="~assets/img/common/back.svg" slot="left" @click="back">
      <div slot="center" class="centerbar">
        <span v-for="(item,index) in title" @click="titleclick(index)" :class="{active: currentIndex === index}">{{item}}</span>
      </div>
    </nav-bar>
  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar.vue'
  export default {
    name: "detail-navbar",
    components:{
      NavBar
    },
    data(){
      return{
        title: ['商品','参数','评论','推荐'],
        currentIndex: 0
      }
    },
    methods:{
      back(){
        this.$router.go(-1);
      },
      titleclick(index){
        this.currentIndex = index
        index = this.currentIndex
        this.$emit('titleclick',index)
      }
    }
  }
</script>

<style scoped>
  .navbar{

  }
  .centerbar{
    display: flex;
  }
  .center span{
    flex: 1;
    font-size: 15px;
  }
  .navbar img{
    margin-top: 10px;
  }
  .active{
   color: var(--color-high-text)
  }
</style>

